<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <button @click="obj.age++">点击大一岁</button>
  <button @click="obj.name += '啊'">点击啊一下</button>
  <button @click="obj.cp.age++">点击CP大一岁</button>
</template>

<script>
import { reactive, ref, watch } from 'vue'
/* 
  目标：掌握使用 watch 函数定义侦听器

*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')
    // 情况4：监听reactive定义的响应式数据，某一个属性
    //   4.1 属性为一个对象
    //   4.2 属性为普通类型数据，需要写成箭头函数 (字符串，数字，布尔值，undefined，null)
    const obj = reactive({
      name: '小白',
      age: 18,
      cp: {
        name: '小黑',
        age: 20,
      },
    })

    // 注意：reactive 对象的新值和旧值是同一个内存地址
    // watch(obj, newVal => {
    //   console.log('obj对象发生了变化', newVal)
    // })

    watch(
      // 某一个属性如果是个对象，还是可以被监听到，默认深度监听对象
      // 💥如果对象改造成箭头函数返回写法，深度监听失效，才需要 deep: true
      () => obj.cp,
      newVal => {
        console.log('obj.cp对象发生了变化', newVal)
      },
      {
        // 深度监听(其实大部分情况下，Vue3默认都可以不用写深度监听)
        deep: true,
        // 立即执行
        immediate: true,
      },
    )

    // 某一个属性如果是个普通类型的数据，发现不行了
    watch(
      () => obj.name,
      newVal => {
        console.log('obj.name发生了变化', newVal)
      },
    )

    watch(
      () => obj.age,
      newVal => {
        console.log('obj.name发生了变化', newVal)
      },
    )

    return { obj }
  },
}
</script>

<style></style>
